﻿@page
@model IndexModel
@{
    ViewData["Title"] = "首页";
}

<style>
    .well {
        margin: 20px 0;
        padding: 30px;
        border: 1px solid #00000024;
        border-radius: 10px;
        background-color: #f2f2f2;
    }

    .link {
        border: 1px solid;
        width: 80px;
        display: block;
        height: 35px;
        text-align: center;
        line-height: 35px;
        border-radius: 5px;
        margin-top: 10px;
        cursor: pointer;
    }

    .code {
        color: #cccccc;
        font-size: 14px;
        margin-top: 10px;
    }
</style>

<div style="text-align:left;margin-top:50px">
    <h3 class="text">接入说明：</h3>
    <p>@ViewData["path"]</p>
    <div class="well">
        <div style="font-size: 16px;">
            如果你的项目需要接入文件预览项目，达到对docx、excel、ppt、jpg等文件的预览效果，那么通过在你的项目中加入下面的代码就可以成功实现：
            <div style="background-color: #2f332a;padding: 10px 20px;margin-top: 10px;">
                <div class="code">
                    // 你要预览的文件访问地址
                    <br />
                    var url = 'http://127.0.0.1:9001/file/test.txt';
                </div>
                <div class="code">
                    // 你要接入的代码
                    <br />
                    window.open('http://127.0.0.1:9001/preview?url='+encodeURIComponent(b64EncodeUnicode(url)));
                </div>
                <div class="code">
                    // base64 加密<br />
                    function b64EncodeUnicode(str) {
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp; return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return String.fromCharCode('0x' + p1);
                    <br />
                    &nbsp;&nbsp;&nbsp;&nbsp;}));
                    <br />
                    }
                </div>
            </div>
        </div>
    </div>

    <h3 class="panel-title">测试：</h3>

    <div class="well">
        <div class="form-group">
            <input type="url" class="form-control" id="url" placeholder="请输入文件访问地址">
        </div>
        <span id="preview" class="link">点击预览</span>
    </div>
</div>

<script src="/lib/jquery/dist/jquery.min.js"></script>
<script>
    $("#preview").on("click", function() {
        window.open('preview?url=' + $("#url").val())
    });
</script>

